<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref, h, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import { Modal } from 'ant-design-vue'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload'])
const valuePay = ref({
  opinion: ''
})
// 表格列配置
const columns = ref([
  { ellipsis: false, title: '申请编号', dataIndex: 'id', key: 'id' },
  { ellipsis: false, title: '申请类型', dataIndex: 'typeName', key: 'typeName' },
  // { ellipsis: false, title: '申请账号', dataIndex: 'applyName', key: 'applyName', },
  { ellipsis: false, title: '申请人员', dataIndex: 'applyName', key: 'applyName' },
  { ellipsis: false, title: '联系电话', dataIndex: 'phone', key: 'phone' },
  { ellipsis: false, title: '证件图片', key: 'idCardImg' },
  { ellipsis: false, title: '资质证书', key: 'certImg' },
  { ellipsis: false, title: '审批状态', key: 'status' },
  { ellipsis: false, title: '审批备注', dataIndex: 'opinion', key: 'opinion' },
  { ellipsis: false, title: '备注', dataIndex: 'remark', key: 'remark' },
  { ellipsis: false, title: '申请时间', dataIndex: 'applyTime', key: 'applyTime', width: '180px' },
  { ellipsis: false, title: '操作', key: 'set', width: '110px', align: 'center' }
])

//删除数据
const del = (item) => {
  Modal.warning({
    title: '删除审批申请',
    content: h(
      'span',
      {},
      '是否删除审批申请：',
      h('span', { style: { color: '#09c690' } }, item.id)
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delWlgl({ id: item.id })
      message.success('删除成功')
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除')
      return Promise.resolve()
    }
  })
}

provide('columns', columns.value)
const curSlt = ref(1)
const opinion = ref('')
const curItem = ref({})
const change = (val) => {
  curSlt.value = val
}
const formRef = ref()
const submit = (record) => {
  if (curSlt.value === 1) {
    save()
  }
  formRef.value
    .validateFields()
    .then(save)
    .catch((err) => {})
}
const save = async () => {
  if (curSlt.value === 2) {
    opinion.value = valuePay.value.opinion
  }
  const para = {
    id: curItem.value.id,
    status: curSlt.value,
    opinion: opinion.value
  }
  console.log(para)
  await api.examine(para)
  message.success('保存成功')
  emits('reload')
  curEvent.value.click()
}

const curEvent = ref()
const open = (event, item) => {
  curEvent.value = event.target
  curItem.value = item
  curSlt.value = 1
  valuePay.value.opinion = ''
  opinion.value = ''
}
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'certImg' && record.certImg">
        <ImageView :value="record.certImg" />
      </template>
      <template v-if="column.key === 'idCardImg' && record.idCardImg">
        <ImageView :value="record.idCardImg" />
      </template>
      <template v-if="column.key === 'status'">
        {{ ['未审核', '审核中', '通过', '驳回'][record.status] }}
      </template>
      <template v-if="column.key === 'set'">
        <a-popover trigger="click" placement="left" v-if="[0, 1].includes(record.status)">
          <template #content>
            <a-select
              class="com-ipt"
              :value="curSlt ?? record.payStatus"
              allowClearstyle="z-index: 99999;"
              :options="[
                { value: 1, label: '同意' },
                { value: 2, label: '驳回' }
              ]"
              @change="change($event, record)"
            />
            <div style="margin-top: 10px" v-if="curSlt === 1">
              <a-textarea
                class="com-ipt"
                v-model:value="opinion"
                placeholder="请输入审批意见"
                :auto-size="{ minRows: 2, maxRows: 5 }"
              />
            </div>
            <div v-else>
              <a-form
                style="margin-top: 10px"
                ref="formRef"
                :model="valuePay"
                layout="vertical"
                autocomplete="off"
              >
                <a-form-item name="opinion" :rules="[{ required: true, message: '请输入' }]">
                  <a-textarea
                    v-model:value="valuePay.opinion"
                    placeholder="请输入审批意见"
                    :auto-size="{ minRows: 2, maxRows: 5 }"
                  />
                </a-form-item>
              </a-form>
            </div>
            <div style="display: flex; flex-direction: row-reverse">
              <AButton type="link" @click="submit()">保存</AButton>
            </div>
          </template>
          <AButton type="link" @click="open($event, record)">审批</AButton>
        </a-popover>
        <div v-else>--</div>
        <AButton type="link" class="com-delbtn" @click="del(record)" v-if="false">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>

<style>
:where(.css-dev-only-do-not-override-1gx70tk).ant-form-item {
  margin-bottom: 0;
}
</style>